<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    /*
    * 1.请自行实现 includes 方法
    *   提示：注意循环的长度 注意 key 的长度 和 str 的长度的关系
    *   接收两个参数
    *       str 需要判断的字符
    *       key 传入用来比较的字符串
    *   返回 return
    *       布尔值
    *           true 有
    *           false 没有
    *
    *
    * 1.includes 封装
    *   方法解决的问题：字符串 str 是否有 subStr
    *   设计：
    *       includes
    *           接收参数：
    *               str 原数组
    *               subStr 子数组
    *           返回：
    *               boolean
    *               true 有
    *               false 没有
    *
    * */
    function includesByYinShi(str,subStr){
        str += ""
        subStr += "" //处理边界问题 如果不是字符串可以转成字符串
        //先弄清楚 i 表示什么
        //从头到尾进行比较，i 表示比较次数
        //i 还表示被比较的元字符串str 比较位置开始的下标 如 let str="abcdef"  let subStr="cd"
        //第一次比较，"cd"与"abcdef"中的"ab"比较，其中a的下标为0。第二次比较，"cd"与"abcdef"中的"bc"比较，其中b的下标为1，以此类推
        //还要弄清楚循环次数是多少 假如原字符串str长度为6，子字符串长度为6，只需要比较1次，原字符串长度为6，子字符串长度为5，需要比较2次，
        //原字符串长度为6，子字符串长度为4，需要比较3次...所以可以得出，比较次数为 i = str - subStr + 1 次，且可以先用变量来储存
        let length = str.length - subStr.length + 1
        let subLength = subStr.length //从哪来的看下面
        let flag = false //先假设找不到相同的
        for(let i = 0;i < length;i++){
            let result = true //这个result表示单次外循环每一次每一组比较结果，可以先假设结果为正确
            //比较是两者之间的比较，刚刚只是分析了被比较的原字符串的情况，还有比较者子字符串的情况，也需要用一个循环来表示
            //又要弄清楚这次的 j 表示什么 我们要拿到子字符串比较的每一位的情况 可以用j表示被比较的每一位的下标
            //j的循环次数是多少，还是刚刚的情况，当我们拿到了原字符串"abcdef"中的"ab"与子字符串"cd"进行比较
            //要比较"ab"的不同"cd"，1次比较a与c相不相同，又1次b与d相不相同。然后"cd"又和下一组拿到的被比较的字符串"bc"进行比较
            //1次比较b与c相不相同，又1次比较c与d相不相同，由此可见，这次的循环比较次数 j = 子字符串的长度 也可以先用变量存储起来
            for(j = 0;j < subLength;j++) {
                if (subStr[j] !== str[i + j]) {//为什么是原字符串i+j 因为每次比较的子字符串每一位下标是固定的 而被比较的部分原字符串每一位下标是会依次递增的！
                    //一旦没找到，将result标记为失败，直接可以结束循环
                    result = false
                    break //跳出内层循环 返回外层循环继续比较下一组
                }
            }
            if(result){
                //找到匹配的元素了，将flag改为true，可以跳出最外层循环交差了
                flag = true
                break
            }
        }
        return flag
    }//注意这个函数中两次循环的区别，第一次是找相同段的具体位置，第二次是找相同段中的每一位进行一一对比
    let str = "abcdedef"
    let subStr = "cdede"
    console.log(includesByYinShi(str,subStr))
</script>
</body>
</html>